<template>
  <ve-liquidfill
    :data="chartData"
    :settings="chartSettings"
    height="100%"
    width="100%"
  />
</template>
<script>
export default {
  data() {
    return {
      chartData: {
        columns: ['city', 'percent'],
        rows: [
          {
            city: 'rate',
            percent: 0.3889
          }
        ]
      },
      chartSettings: {}
    }
  },
  mounted() {
    this.chartSettings = {
      // wave: [0.5, 0.3, 0.1],
      seriesMap: {
        rate: {
          radius: '80%',
          label: {
            insideColor: '#fff',
            formatter: v => {
              return `${Math.floor(v.data.value * 100)}%`
            },
            textStyle: {
              fontSize: 36,
              color: '#999',
              fontWeight: 'normal'
            },
            position: ['50%', '50%']
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderColor: '#aaa4a4',
              borderWidth: 1,
              color: 'none',
              shadowBlur: 0,
              shadowColor: '#fff'
            }
          },
          backgroundStyle: {
            color: '#fff'
          },
          itemStyle: {
            shadowBlur: 0,
            shadowColor: '#FFF'
          },
          amplitude: '8',
          color: [this.getColor(this.chartData.rows[0].percent)]
          // color: ["red", "green", "yellow"]
        }
      }
    }
  },
  methods: {
    getColor(value) {
      return value > 0 && value <= 0.5
        ? 'rgba(97,216,0,0.7)'
        : value > 0.5 && value <= 0.8
        ? 'rgba(204,178,26,0.7)'
        : value > 0.8
        ? 'rgba(241,47,28,0.7)'
        : '#c7c7cb'
    }
  }
}
</script>
